<template>
    <!-- <div v-if="resources.length > 0 || illustrationData.length >0" class="resource-list"> -->
    <div v-if="resources.length > 0 " class="resource-list">
      <div v-for="resource in resources" :key="resource.id">
        <div class="resource-info">
          <div class="img-content">
            <div class="resource-name">图片主题：{{resource['resourceName']}}</div>
            <div class="thumbnail-container flex">
                <el-image
                :src=" url + resource.id + '.png'"
                fit="contain"
                class="thumbnail"
                lazy
                ></el-image>
            </div>
            <div class="extra-info">
                <i class="el-icon-time"></i>
                {{ resource['updateTime'] }}
            </div>
          </div>
            <div class="operations">
              <div class="full-width">
              <download-button
                :resourceID="resource['id']"
                :resource="resource"
                :size="'medium'"
              ></download-button>
              </div>
              <div class="full-width">
                <add-to-package-button
                  :resourceType="'resource'"
                  :resourceID="String(resource.id)"
                  :size="'medium'"
                ></add-to-package-button>
              </div>
            </div>
        </div>
      </div>
    <div>
      <!-- <div v-for="item in illustrationData" :key="item.id" class="list">
        <div class="resource-info">
          <div class="img-content">
            <div class="resource-name">图片主题：{{item['conceptName']}}</div>
            <div class="thumbnail-container flex">
                <el-image
                :src="item.url"
                :preview-src-list="urlList"
                class="thumbnail "
                fit="contain"
            ></el-image>
            </div>
            <div class="extra-info">
                {{ item['uploadtime'] }}
            </div>
          </div>
          <div class="operations">
              <div class="full-width">
                <add-to-package-button
                  :resourceType="'resource'"
                  :resourceID="String(item.id)"
                  :size="'medium'"
                ></add-to-package-button>
              </div>
            </div>
        </div>
      </div> -->
    </div>
    </div>
  </template>
  
  <script>
  import ResourceLink from '@/components/ResourceLink'
  import DownloadButton from '@/components/Buttons/DownloadButton'
  import AddToPackageButton from '@/components/Buttons/AddToPackageButton'
  import merge from 'webpack-merge'
  import { globalUrl } from '@/config'
  import { entityIllustration } from '@/api/recommend'
  export default {
    name: 'ResourceListWithInfo',
    components: { ResourceLink, DownloadButton, AddToPackageButton },
    props: {
      resources: Array,
      illustrationData: Array,
    },
    data() {
      return {
        url: globalUrl.coverUrl,
        illustrationData:[]
      }
    },
    watch: {
    },
    created() {
        
    },
    mounted() {
      console.log(this.illustrationData)
    },
    methods: {
        getkeyword(){
           
        },
      searchEntity(entity) {
        this.$router.push({
          query: merge(this.$route.query, {
            q: entity,
            type: 0,
            page: 1,
            sort: 0
          })
        })
      },
    }
  }
  </script>
  
  <style scoped>
  .resource-info {
    /*height: 190px;*/
    display: flex;
    border-bottom: 1px solid #dcdfe6;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .resource-info .right-side {
    justify-content: space-between;
    width: 100%;
  }
  
  .thumbnail-container {
    /*height: 100%;*/
    align-items: center;
    justify-content: center;
    margin-top: 4%;
  }
  
  .thumbnail {
    width: 100%;
    height: 100%;
  }
  
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    margin-left: 1rem;
  }
  
  .entity-list {
    /* 这里的间距要减去按钮设置的间距，但不完全减 */
    margin-top: calc(0.5rem - 5px);
    display: flex;
    flex-wrap: wrap;
  }
  
  .entity-list div {
    margin-right: 10px;
    margin-top: 10px;
  }
  
  .extra {
    display: flex;
    margin-bottom: 0.6rem;
    /*position: absolute;*/
    /*bottom: 0;*/
    min-width: 220px;
  }
  
 .extra-info {
    display: flex;
    margin-bottom: 0.5rem;
    min-width: 220px;
    color: #909399;
    font-size: 1rem;
    line-height: 1rem;
    margin-right: 1rem;
    margin-top: 1rem;
  }
  
  .operations {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 43%;
    justify-content: center;
    align-items: center;
  }
  
  .operations button {
    margin-bottom: 12px;
  }
  
  .file-name {
    color: #909399;
  }
  
  .resource-name {
    padding-top: 0.6rem;
    font-size: 1.1rem;
    font-weight: bold;
  }
  

  
  .name-in-url {
    color: #555555;
    margin-bottom: 0.6rem;
  }
  
  .entity-btn {
    color: #555555;
  }
  
  /* 测试 */
  .entity-list {
    margin-top: -0.6rem;
  }
  .img-content{
    flex-direction: row;
    justify-content: space-between;
    width:50%;
  }
  .full-width{
    margin-top: 0.6rem;
  }
  </style>
  